<template>
	<view>
		<view class="topmxx dis_f aic jub">
			<view class="dis_f aic jub left">

				<input type="text" placeholder="输入关键词搜索" placeholder-style="color:#bdbdbd" v-model="keywords">

			</view>
			<view class=" cf fs30" @click="sousuo">
				搜索
			</view>
		</view>
		<view class="dis_f aic" style="margin-top: 123rpx;">
			<view class="left_box">
				<view class="dis_f aic leftmxx" v-for=" (item,index) in category" :key="index"
					:class="{'active':isActive==index}" @click="chenked(index,item)">
					{{item.title}}
				</view>
			</view>
			<view class="right_box">

				<view class="dis_f aic jub fww">
					<view class="mianlist" v-for="(item,index) in list" :key="index"
						@click="jump('/pagesA/in_details/in_details?id='+item.id)">
						<image :src="item.img" mode="aspectFill" class="mianimg"></image>
						<view class="fs32 fwb  mt10 ml20">
							{{item.main_title}}
						</view>
						<view class="dis_f aic  mt10 ml20" v-if="item.goods_type != 2">

							<view class=" fs26 c6" style="text-decoration: line-through;">¥{{item.market_price}}</view>

						</view>
						<view class="dis_f aic jub  mt10 ml20 mr20 mb10">
							<view class="dis_f aic fwb" style="color: #e9121d;">
								<text class="fs24">￥</text>
								<text class="fs28">{{item.selling_price}}</text>
							</view>
							<view class="fs24" style="color: #f6b542;" v-if="item.goods_type == 1">
								送{{item.cpa}}积分
							</view>
							<view class="fs24" style="color: #f6b542;" v-if="item.goods_type == 2">
								送{{item.cps}}余额
							</view>
						</view>
					</view>
				</view>
				<view class="dis_f juc cac fs26" style="padding: 30rpx;" v-if="list.length == 0">
					暂无数据
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {

				list: [],
				category: [],
				isActive: 0,
				cid: '',
				keywords: '',
				page: 1,
				pageConten: 0,
				loadstatus: '上拉加载更多',
				userinfo: ""

			}
		},
		onLoad(option) {
			that = this
			console.log(option.invite_id)
			uni.setStorageSync('invite_id', option.invite_id)
			console.log(option.cid)
			if (option.cid) {
				this.cid = option.cid
				this.list = []
				this.page = 1
				this.postlist()
			} else {
				this.postconfig()
			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userInfo') || ''
		},
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			return {
				title: '九淘',
				type: 0,
				path: '/pages/shopping/shopping?invite_id=' + this.userinfo.id,
		
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '九淘',
				type: 0,
				path: '/pages/shopping/shopping?invite_id=' + this.userinfo.id,
			}
			// }
		},
		onReachBottom() {
			if (this.page < this.pageConten) {
				this.page++
				this.postlist()
			} else if (this.page == this.pageConten) {
				this.loadstatus = '没有更多了'
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.list = []
			this.page = 1
			this.postlist()
			uni.stopPullDownRefresh(); //停止刷新
			// this.xialashow = true
		},
		methods: {
			jump(url) {
				if (this.userinfo == '') {
					// this.showxieyi = true
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
					uni.reLaunch({
						url: '/pages/my/my'
					})
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			sousuo() {
				if (this.keywords == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: "none"
					})
				} else {
					this.list = []
					this.page = 1
					this.postlist()
				}
			},
			postconfig() {
				this.api.post('index/classifylst').then(res => {
					console.log(res);
					if (res.code == 200) {
						this.category = res.data
						this.cid = res.data[0].id
						this.list = []
						this.page = 1
						this.postlist()
					}


				})
			},
			postlist() {
				let that = this

				that.api.post('index/goodslst', {
					page: this.page,
					size: 10,
					type: 0,
					keywords: this.keywords,
					cid: this.cid,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.pageConten = res.ext.pageCount

						this.list = this.list.concat(res.data);
						this.page >= this.pageConten ? this.loadstatus = '没有更多了' : this.loadstatus = '上拉加载更多'

					}


				})
			},
			chenked(index, item) {
				this.isActive = index
				this.cid = item.id
				this.list = []
				this.page = 1
				this.postlist()
			},

		}
	}
</script>

<style scoped lang="scss">
	.mianimg {

		width: 100%;
		height: 250rpx;
		background: #FFFFFF;
		border: 1px solid #F1F1F1;
		border-radius: 15rpx;
	}

	.mianlist {
		background: #FFFFFF;
		border: 1px solid #F1F1F1;
		border-radius: 15rpx;
		box-sizing: border-box;
		width: 48%;
	}

	input {
		font-size: 26rpx;
		width: 100%;
		height: 100%;
		line-height: 72rpx;
		color: #000;
	}

	.topmxx {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #feb746;
		width: 100%;
		height: 120rpx;
		padding: 26rpx 30rpx;
		box-sizing: border-box;
	}

	.left {
		width: 80%;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}

	.foort {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 31rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.xiadan {
		width: 180rpx;
		height: 60rpx;
		background-color: #f4b16b;
		color: #242f56;
		font-size: 26rpx;
		border-radius: 60rpx;
		font-weight: bold;
	}

	.nummxx {
		padding: 0rpx 12rpx;
		background-color: #f1b06c;
		position: absolute;
		left: 8rpx;
		top: 8rpx;
		border-radius: 60rpx;
	}

	.icon-jian {
		position: absolute;
		right: 0;
		top: 0rpx;
		color: #000;
		font-size: 56rpx;
	}

	.tab-scroll {
		box-shadow: 1px 1px 10px 1px #ccc;
		background: #f7f8fa;
		border-radius: 16rpx;
		height: 129rpx;
		padding: 0 15rpx;
		box-sizing: border-box;

		.tab-scroll_box {
			display: flex;
			align-items: center;
			height: 129rpx;

			.tab-scroll_item {
				line-height: 30px;
				margin-right: 20rpx;
				flex-shrink: 0;
				border-radius: 16rpx;
				background: #ffff;
				border: 1px solid #ccc;
				font-size: 26rpx;
				height: 60rpx;
				padding: 0 25rpx;
			}
		}
	}


	.btnpic {
		background-color: #808080;
		color: #fff;
		width: 100%;
		height: 60rpx;
		border-radius: 16rpx;
		font-size: 26rpx;
	}

	.beihu {
		font-size: 22rpx;
		color: #db5242;
		height: 34rpx;
	}

	.picar {
		color: #f4b16b;
		font-size: 26rpx;
	}

	.bar-swiper {
		height: 80vh;
	}

	.item_box image {
		width: 100%;
		height: 228rpx;
		border-radius: 16rpx;
	}

	.item_box {
		position: relative;
		width: 47%;
		padding: 10rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border: 1px solid #F1F1F1;
		border-radius: 15rpx;
	}


	.xuanzmxx {
		background-color: #f4b16b !important;
		height: 60rpx;
	}

	.topLight {
		position: fixed;
		top: 0;
		box-shadow: 1px 1px 10px 1px #ccc;
		background: #fff;
		padding: 40rpx 5rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
	}

	.right_box {
		margin-left: 23%;
		width: 75%;
		height: 89vh;
	}

	.leftmxx {
		font-size: 26rpx;
		height: 90rpx;
		font-weight: 600;
		padding-left: 20rpx;
	}

	.active {
		position: relative;
		font-weight: 600;
		background-color: #fff;

		height: 90rpx;
		font-weight: 600;
	}

	.left_box {
		background-color: #F1F1F1;
		width: 20%;
		height: 89vh;
		position: fixed
	}
</style>